<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.6.0.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .buttonGroups {
            padding: 10px 10px;
        }

        .wrap {
            width: 1100px;
            height: 600px;
            border: 1px solid #333;
            margin: 10px;
            margin-top: 0;
            position: relative;
        }

        .wrap .sub {
            width: 100px;
            height: 100px;
            background-color: #6ff;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="buttonGroups">
        <button>start</button>
        <button>stop(false,false)</button>
        <button>stop(false,true)</button>
        <button>stop(true,false)</button>
        <button>stop(true,true)</button>
        <button>finish</button>
        <button>:animated</button>
    </div>
    <div class="wrap">
        <div class="sub"></div>
    </div>
</body>
<script>
    // js封装  =>   animate(ele,attr,end,aniType,fn)

    // jquery运动  $(ele).animate(params,speed,callback)
    // ele     运动的元素
    // params  运动的属性及其终点值    {left:1000,top:500}  => 可以实现多属性运动 
    // speed   运动的方式   三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
    // callback  在运动完成时执行的函数，每个元素执行一次。

    // stop(clearQueue,gotoEnd)  
    // clearQueue 是否清除队列  (默认false) 
    // true    清除队列,   停止当前正在正在执行的动画,后续的运动任务也不在执行
    // false   不清除队列, 停止当前正在正在执行的动画,后续的运动任务记录执行(从当前进入下一个)

    // gotoEnd  让当前正在执行的动画立即完成(立即到达当前动画的终点)   (默认false) 
    // true  => 当前正在执行的动画立即完成(立即到达当前动画的终点)
    // false => 当前正在执行的动画不立即完成 (停留在当前位置)

    // gotoEnd (false)  当前正在执行的动画不立即完成(停留在当前位置)  => 没有到达本次运动的终点 => 不会触发回调函数

    // finish()  清除队列,到达队列中动画的终点  => 会触发回调函数


    // 运动队列(可以理解为数组)    [{ left: 1000 },{ top: 500 },{ left: 0 },{ top: 0 }]

    $("button").eq(0).click(function () {
        $(".sub").animate({ left: 1000 }, 2000, function () {
            console.log("本次运动结束:left->1000");
        }).animate({ top: 500 }, 1000, function () {
            console.log("本次运动结束:top->500");
        }).animate({ left: 0 }, 2000, function () {
            console.log("本次运动结束:left->0");
        }).animate({ top: 100 }, 1000, function () {
            console.log("本次运动结束:top->100");
        })
    })


    $("button").eq(1).click(function () {
        // false 停止当前动画,但是不清空队列   (从当前进入下一个)
        // false 当前正在执行的动画不立即完成  (停留在当前位置)
        // => 停止当前动画,从当前位置 进入下一个动画
        $(".sub").stop(false, false)
    })

    $("button").eq(2).click(function () {
        // false 停止当前动画,但是不清空队列   (从当前进入下一个)
        // false 当前正在执行的动画立即完成  (立即到达当前动画的终点)
        // => 停止当前动画,从当前动画的终点位置 进入下一个动画
        $(".sub").stop(false, true)
    })

    $("button").eq(3).click(function () {
        // true  停止当前动画,清空队列   (后续的动画不在执行)
        // false 当前正在执行的动画不立即完成  
        // => 停止当前动画(停留在当前位置),清空队列
        $(".sub").stop(true, false)
    })

    $("button").eq(4).click(function () {
        // true  停止当前动画,清空队列   (后续的动画不在执行)
        // true 当前正在执行的动画立即完成   (立即到达当前动画的终点)
        // => 停止当前动画(立即到达当前动画的终点),清空队列
        $(".sub").stop(true, true)
    })

    $("button").eq(5).click(function () {
        $(".sub").finish()
    })
    $("button").eq(6).click(function () {
        console.log($(":animated"));  //从所有元素中 找到正在运动的元素(jquery运动)
    })







</script>

</html>